<!--
  趋势图表组件
  基于 ECharts 的多指标折线图，用于展示数据趋势
-->
<template>
  <div ref="chartRef" class="trend-graph"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chartRef);
      const options = {
        backgroundColor: "#f9f9f9", // 浅色背景
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["指标1", "指标2", "指标3"],
          textStyle: {
            color: "#333" // 深色文字
          }
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.data.map(d => d.year),
            axisLine: {
              lineStyle: {
                color: "#333" // 深色文字
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#333" // 深色文字
              }
            }
          }
        ],
        series: [
          {
            name: "指标1",
            type: "line",
            data: this.data.map(d => d.value1),
            color: "#ff69b4" // 霓虹色
          },
          {
            name: "指标2",
            type: "line",
            data: this.data.map(d => d.value2),
            color: "#00ff7f" // 霓虹色
          },
          {
            name: "指标3",
            type: "line",
            data: this.data.map(d => d.value3),
            color: "#00bfff" // 霓虹色
          }
        ]
      };
      chart.setOption(options);
    }
  }
};
</script>

<style scoped>
.trend-graph {
  width: 100%;
  height: 400px;
}
</style>